<template>
	<view class="sort-container">
		<view class="sort-options">
			<view v-for="sort in sortOptions" :key="sort[format.id]" class="sort-option x-f">
				<text>{{ sort[format.name] }}</text>
				<view>
					<text class="order" @tap="handleOrderClick(sort, item)" v-for="(item,index) in sortFields"
						:key="index"
						:class="{ 'selected': defaultSort === sort[format.id] && selectSort[format.value] === item[format.value] }">
						{{item[format.text]}}
					</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "m-sort",
		props: {
			sortOptions: {
				type: Array,
				default: () => []
			},
			sortFields: { // 右侧指定排序数据
				type: Array,
				default: () => {
					let data = [{
							text: '升序',
							value: 'ASC'
						},
						{
							text: '降序',
							value: 'DESC'
						}
					]

					return data
				}
			},
			defaultSort: {
				type: [String, Number],
				default: ""
			},
			selectSort: {
				type: Object,
				default: {}
			},
			format: {
				type: Object,
				default: () => {
					let obj = {
						id: 'id',
						name: 'name',
						text: 'text',
						value: 'value',
					}
					return obj
				}
			}
		},
		data() {
			return {

			};
		},
		created() {

		},
		methods: {
			handleOrderClick(sort, item) {

				this.$emit("change", {
					sort: sort,
					item: item
				});
			}
		}
	};
</script>

<style lang="scss">
	.sort-container {
		.sort-options {
			.sort-option {
				display: flex;
				align-items: center;
				justify-content: space-between;
				// @include flex(between, center);
				padding: 10upx 10upx;
				border-bottom: 1px solid #f3f3f3;

				.order {
					// margin-left: 40upx;
					padding: 0 20px;
					cursor: pointer;
					color: #5d5d5d;

					&:first-child {
						border-right: 1px solid #f3f3f3;
					}

					&.selected {
						font-weight: bold;
						color: #2aaa7d;
					}
				}
			}
		}
	}
</style>